<template>
    <div>
        <a-card>
            <div class="card-hr">
                <a-form-model :model="searchForm" layout="inline" :colon="false">
                    <a-form-model-item label="时间筛选" prop="date">
                        <a-range-picker format="YYYY-MM-DD" @change="onChanges" v-model="searchForm.date" style="width: 230px;">
                            <a-icon slot="suffixIcon" type="calendar" />
                        </a-range-picker>
                    </a-form-model-item>

                    <a-form-model-item>
                        <a-button @click="visible = true" type="danger" class="btn-danger"
                            style="margin-right: 8px;">高级搜索</a-button>
                        <a-button @click="getDetails" type="primary">查询</a-button>
                        <a-button @click="reset" class="btn-reset">重置</a-button>
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button ghost @click="setTime(1)" class="btn-ghost">最近7天</a-button>
                        <a-button ghost @click="setTime(2)" class="btn-ghost">最近30天</a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <div class="lineChart" id="myCharts"></div>
        </a-card>

        <a-modal title="高级搜索" v-model="visible" :maskClosable="false" :width="800" :footer="null">

            <div>
                <div class="search">
                    <div class="search-title"> 理化指标 </div>
                    <div class="search-check">
                        <a-checkbox :indeterminate="indeterminateIndex" :checked="checkAllIndex"
                            @change="onCheckAllChangeIndex" style="margin-right: 10px;">
                            全部
                        </a-checkbox>
                        <a-checkbox-group v-model="indexAllchecked" @change="changeIndex">
                            <a-checkbox v-for="(item, index) in indexList" :key="index" :value="item.id"> {{ item.title
                                }}</a-checkbox>
                        </a-checkbox-group>
                    </div>
                </div>
                <div class="search">
                    <div class="search-title"> 磨粒分布 </div>
                    <div class="search-check" v-for="(item, index) in distributionList " :key=index>
                        <div class="mb-ten">{{ item.title }}</div>
                        <div class="mb-ten">
                            <a-checkbox :indeterminate="item.indeterminate" :checked="item.checkAll"
                                @change="onCheckAllChangeDistribution($event,index)" style="margin-right: 10px;">
                                全部
                            </a-checkbox>
                        </div>
                        <a-checkbox-group v-model="item.allChecked" @change="changeDistribution($event,index)">
                            <a-checkbox v-for="(child, idx) in item.child" :key="idx" :value="child.id" class="mb-ten">
                                {{ child.title }}
                            </a-checkbox>
                        </a-checkbox-group>
                    </div>
                </div>
            </div>
            <a-row :gutter="16">
                <a-col :span="8">
                    <a-button @click="handleClear" ghost class="btn-ghost">清除条件</a-button>
                </a-col>
                <a-col :span="8">
                    <div class="flex align-center justify-center">
                        <a-button @click="handleClear"
                            style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
                        <a-button @click="submit" type="primary">确定</a-button>
                    </div>
                </a-col>
            </a-row>
        </a-modal>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import {getSensorsByCode} from "@/services/device";
export default {
    name: "history",
    data() {
        return {
            searchForm: {},
            visible: false,
            form:{},
            indexList: [
                { title: "温度", flag: false, id: 1001001 },
                { title: "粘度", flag: false, id: 1001002 },
                { title: "密度", flag: false, id: 1001003 },
                { title: "常电介数", flag: false, id: 1001004 },
                { title: "水活性", flag: false, id: 1001005 },
                { title: "含水量", flag: false, id: 1001006 },
                { title: "含水率", flag: false, id: 1001007 }
            ],//理化指标
            indeterminateIndex: false,
            checkAllIndex: false,
            indexAllchecked: [],

            distributionList: [
                {
                    title: "铁磁颗粒", flag: false, id: 2001,
                    indeterminate: false,
                    checkAll: false,
                    allChecked: [],
                    child: [
                        { title: "A：70-90μm", flag: false, id: 2001001 },
                        { title: "B：90-110μm", flag: false, id: 2001002 },
                        { title: "C：110-140μm", flag: false, id: 2001003 },
                        { title: "D：140-170μm", flag: false, id: 2001004 },
                        { title: "E：170-200μm", flag: false, id: 2001005 },
                        { title: "F：200-230μm", flag: false, id: 2001006 },
                        { title: "G：230-280μm", flag: false, id: 2001007 },
                        { title: "H：280-350μm", flag: false, id: 2001008 },
                        { title: "I：350-420μm ", flag: false, id: 2001009 },
                        { title: "J：>420μm ", flag: false, id: 2001010 }
                    ]
                },
                {
                    title: "非铁磁颗粒", flag: false, id: 2002,
                    indeterminate: false,
                    checkAll: false,
                    allChecked: [],
                    child: [
                        { title: "A：260-530μm", flag: false, id: 2002001 },
                        { title: "B：530-1060μm", flag: false, id: 2002002 },
                        { title: "C:1060-2160μm", flag: false, id: 2002003 },
                        { title: "D：>2160μm", flag: false, id: 2002004 },
                    ]
                },
                {
                    title: "颗粒度分布", flag: false, id: 2003,
                    indeterminate: false,
                    checkAll: false,
                    allChecked: [],
                    child: [
                        { title: "＜5μm 颗粒数", flag: false, id: 2003001 },
                        { title: "5-10μm颗粒数", flag: false, id: 2003002 },
                        { title: "10-50μm颗粒数", flag: false, id: 2003003 },
                        { title: "50-100μm颗粒数", flag: false, id: 2003004 },
                        { title: ">100μm颗粒数", flag: false, id: 2003005 }
                    ]
                },
            ],
        }
    },
    mounted() {
        this.getDetails()
    },
    methods: {
      submit(){
        let target=[];
        let distribution=[];
        for(let i in this.indexList){
          if(this.indexList[i].flag){
            target.push(this.indexList[i].id)
          }
        }
        for(let i in this.distributionList){
          for(let t in this.distributionList[i].child){
            if(this.distributionList[i].child[t].flag){
              distribution.push(this.distributionList[i].child[t].id)
            }

          }
        }
        // this.form.target=target.join(',');
        // this.form.distribution=target.join(',');
        // this.form.id=this.id
        this.visible=false;
        return
        // ds.submitpost(this.form).then(res => {
        //   console.log(res);
        //   this.$message.success('提交成功')
        //   this.visible=false;
        // })
      },
      setTime(type){
        if(type==1){
          // 获取当前日期
          let currentDate = new Date();

// 计算最近七天的开始时间和结束时间
          let endTime = currentDate.toISOString().slice(0, 10); // 最近七天的结束时间为当前日期
          currentDate.setDate(currentDate.getDate() - 6); // 将当前日期向前推6天
          let startTime = currentDate.toISOString().slice(0, 10); // 最近七天的开始时间为向前推6天后的日期

          this.form.startTime=startTime+' 00:00:00';
          this.form.endTime=endTime+' 23:59:59';
        }else {
          // 获取当前日期
          let currentDate = new Date();

          // 计算最近七天的开始时间和结束时间
          let endTime = currentDate.toISOString().slice(0, 10); // 最近七天的结束时间为当前日期
          currentDate.setDate(currentDate.getDate() - 29); // 将当前日期向前推6天
          let startTime = currentDate.toISOString().slice(0, 10); // 最近七天的开始时间为向前推6天后的日期
          this.form.startTime=startTime+' 00:00:00';
          this.form.endTime=endTime+' 23:59:59';
        }
        this.getDetails()
      },
      onChanges(date, dateString) {
        console.log(dateString);
        this.searchForm.date=dateString;
        this.form.startTime=dateString[0]+' 00:00:00';
        this.form.endTime=dateString[1]+' 23:59:59';
      },
      //重置
      reset(){
        this.searchForm={}
        this.indexList=[
          { title: "温度", flag: false, id: 1001001 },
          { title: "粘度", flag: false, id: 1001002 },
          { title: "密度", flag: false, id: 1001003 },
          { title: "常电介数", flag: false, id: 1001004 },
          { title: "水活性", flag: false, id: 1001005 },
          { title: "含水量", flag: false, id: 1001006 },
          { title: "含水率", flag: false, id: 1001007 }
        ]
        this.distributionList = [
          {
            title: "铁磁颗粒", flag: false, id: 2001,
            indeterminate: false,
            checkAll: false,
            allChecked: [],
            child: [
              { title: "A：70-90μm", flag: false, id: 2001001 },
              { title: "B：90-110μm", flag: false, id: 2001002 },
              { title: "C：110-140μm", flag: false, id: 2001003 },
              { title: "D：140-170μm", flag: false, id: 2001004 },
              { title: "E：170-200μm", flag: false, id: 2001005 },
              { title: "F：200-230μm", flag: false, id: 2001006 },
              { title: "G：230-280μm", flag: false, id: 2001007 },
              { title: "H：280-350μm", flag: false, id: 2001008 },
              { title: "I：350-420μm ", flag: false, id: 2001009 },
              { title: "J：>420μm ", flag: false, id: 2001010 }
            ]
          },
          {
            title: "非铁磁颗粒", flag: false, id: 2002,
            indeterminate: false,
            checkAll: false,
            allChecked: [],
            child: [
              { title: "A：260-530μm", flag: false, id: 2002001 },
              { title: "B：530-1060μm", flag: false, id: 2002002 },
              { title: "C:1060-2160μm", flag: false, id: 2002003 },
              { title: "D：>2160μm", flag: false, id: 2002004 },
            ]
          },
          {
            title: "颗粒度分布", flag: false, id: 2003,
            indeterminate: false,
            checkAll: false,
            allChecked: [],
            child: [
              { title: "＜5μm 颗粒数", flag: false, id: 2003001 },
              { title: "5-10μm颗粒数", flag: false, id: 2003002 },
              { title: "10-50μm颗粒数", flag: false, id: 2003003 },
              { title: "50-100μm颗粒数", flag: false, id: 2003004 },
              { title: ">100μm颗粒数", flag: false, id: 2003005 }
            ]
          },
        ]
        this.form={};
        this.getDetails()
      },
      //获取详情
      getDetails() {
        let target=[];
        let distribution=[];
        for(let i in this.indexList){
          if(this.indexList[i].flag){
            target.push(this.indexList[i].id)
          }
        }
        for(let i in this.distributionList){
          for(let t in this.distributionList[i].child){
            if(this.distributionList[i].child[t].flag){
              distribution.push(this.distributionList[i].child[t].id)
            }

          }
        }
        // this.form.target=target.join(',');
        // this.form.distribution=target.join(',');

        let data={
          sensor_sn:this.$route.query.id,
          // ...this.searchForm,
          ...this.form
        }
        getSensorsByCode(data).then((res) => {
          console.log(res)
          this.getInit(res)
        }).catch(() => {

        });
        // ds.history(data).then(res => {
        //   console.log(res)
        //   this.$nextTick(()=>{
        //
        //   })
        // })
      },
        handleClear(){
            this.indeterminateIndex = false
            this.checkAllIndex = false
            this.indexAllchecked = []
            let data = this.distributionList
            data.forEach(item=>{
                item.indeterminate = false
                item.checkAll = false
                item.allChecked = []
            })
            this.distributionList = data
            // this.visible = false
        },
        changeDistribution(checkedList,index){
            this.distributionList[index].indeterminate = !!checkedList.length && checkedList.length < this.distributionList[index].child.length;
            this.distributionList[index].checkAll = checkedList.length === this.distributionList[index].child.length
        },
        onCheckAllChangeDistribution(e,index){
            this.distributionList[index].allChecked = e.target.checked ? this.distributionList[index].child.map(el => { return el.id }) : []
            this.distributionList[index].indeterminate = false
            this.distributionList[index].checkAll =  e.target.checked
        },

        changeIndex(checkedList) {
            this.indeterminateIndex = !!checkedList.length && checkedList.length < this.indexList.length;
            this.checkAllIndex = checkedList.length === this.indexList.length;
        },
        onCheckAllChangeIndex(e) {
            this.indexAllchecked = e.target.checked ? this.indexList.map(el => { return el.id }) : []
            Object.assign(this, {
                indeterminateIndex: false,
                checkAllIndex: e.target.checked,
            });
            console.log(this.indexList)
        },
        getInit(data) {
            let date=[];
            let temper=[];
            let vis=[];
            let dens=[];
            let diel=[];
            let ppm=[];
          for(let i in data){
            date.push(data[i].create_time);
            temper.push(data[i].temper);
            vis.push(data[i].vis);
            dens.push(data[i].dens);
            diel.push(data[i].diel);
            ppm.push(data[i].ppm);
          }
            var myChart = echarts.init(document.getElementById('myCharts'))

            var option;
            option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    textStyle: {
                        color: '#A4A8C4' // 这里设置图例的字体颜色为红色
                    },
                    data: ['温度(℃)', '密度(Kg/m³)', '粘度(Cst)', '介电常数(F/m)', '含水量(%)']
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },
              dataZoom: [
                {
                  type: 'slider',
                  show: true
                }
              ],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#DADDED'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(150, 162, 231, 0.2)', // 这里设置你想要的颜色
                        }
                    },
                    data: date
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#DADDED'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            // type: 'dashed',
                            borderWidht: 1,
                            color: "rgba(150, 162, 231, 0.2)"
                        }

                    },
                },
                series: [
                  {
                    name: '温度(℃)',
                    type: 'line',
                    symbol: 'none',
                    data: temper
                  },
                  {
                    name: '密度(Kg/m³)',
                    type: 'line',
                    symbol: 'none',
                    data: dens
                  },
                  {
                    name: '粘度(Cst)',
                    type: 'line',
                    symbol: 'none',
                    data: vis
                  },
                  {
                    name: '介电常数(F/m)',
                    type: 'line',
                    symbol: 'none',
                    data: diel
                  },
                  {
                    name: '含水量(%)',
                    type: 'line',
                    symbol: 'none',
                    data: ppm
                  }
                ]
            };

            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();

            };
        },
    }
}
</script>
<style scoped lang="less">
.btn-ghost {
    color: #EEF1F3 !important;
    border-color: #EEF1F3 !important;
    margin-left: 8px;
}

.lineChart {
    margin: 20px 0;
    width: 100%;
    height: 54vh;
}

.search {
    font-size: 14px;
    color: #E2E5FF;
    border-bottom: 1px solid rgba(220, 229, 236, 0.3);
    padding-bottom: 18px;
    margin-bottom: 18px;
    box-sizing: border-box;

    &-title {
        font-weight: bold;
        margin-bottom: 10px;
    }

    &-check {
        padding-left: 20px;
    }
}

.search:last-child {
    margin-bottom: 38px;
}

/deep/ .ant-checkbox {
    .ant-checkbox-inner {
        border: 1px solid #CEDAE0;
        background-color: #ffffff;
    }
}

// 设置选中的颜色
/deep/ .ant-checkbox-checked .ant-checkbox-inner,
/deep/ .ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: #3987EB;
    border: none;
}

/deep/ .ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: #ffffff;
}

/deep/ .ant-checkbox-indeterminate .ant-checkbox-inner:after {
    background-color: #3987EB;
}
</style>
